<template>
  <div class="pages">
    <headerTitle :navTitle="'课件与视频>财务管理课程'"></headerTitle>
    <div class="page-title">
      <div>财务管理课程（一）</div>
      <div class="add-title" @click="toAddd">新增章节</div>
    </div>
    <div class="page-table">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="weekNumber" label="周" align="center" />
        <el-table-column prop="lessonNumberOfWeek" label="课" align="center" />
        <el-table-column prop="chapterName" label="章节名称" align="center">
          <template #default="scope">
            <div @click="toAssistant">
              {{ scope.row.chapterName }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="knowledgePoints"
          label="知识目标与知识点"
          align="center"
        >
          <template #default>
            <div class="look-detail" @click="detailFn">点击查看</div>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="课件视频">
          <template #default>
            <div class="icon-list">
              <div class="look-detail" @click="upLoadFlag = true">
                <el-icon><Memo /></el-icon>
              </div>
              <div class="look-detail">
                <el-icon><Files /></el-icon>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <knowledgeDetail
      @close="closeFn"
      @submit="submitFn"
      v-if="detailFlag"
    ></knowledgeDetail>
    <fileUpload @closeDialog="closeDialog" v-if="upLoadFlag"></fileUpload>
  </div>
</template>

<script setup>
import { reactive, toRefs, ref } from "vue";
import knowledgeDetail from "@/components/knowledgeDetail.vue";
import headerTitle from "@/components/headerTitle.vue";
import { useRouter } from "vue-router";
import { curriculumList } from "@/request/api";
import fileUpload from "@/components/fileUpload.vue";
const router = useRouter();
let data = reactive({
  tableData: [],
});
const { tableData } = toRefs(data);
let detailFlag = ref(false);
let navTitle = ref("课程与作业");
let upLoadFlag = ref(false);
function closeFn() {
  detailFlag.value = false;
}
/**
 * 提交修改信息
 */
function submitFn() {
  detailFlag.value = false;
}
/**
 * 点击查看详情
 */
function detailFn() {
  console.log("00000");
  detailFlag.value = true;
}

function getList() {
  curriculumList().then((res) => {
    if (res.code == 200) {
      data.tableData = res.list;
    }
  });
}

/**
 * 点击新增章节
 */
function toAddd() {
  router.push("/pptTemp");
}

/**
 * 跳转课题页面
 */
function toAssistant() {
  router.push("/assistant");
}

/**
 * 关闭上传文件弹窗
 */
function closeDialog() {
  upLoadFlag.value = false;
}

getList();
</script>

<style lang="less" scoped>
.pages {
  margin: 20px;
  height: calc(100vh - 120px);
  background: #fff;
  padding: 20px;
  box-shadow: 0 0 8px 0 #999;
  border-radius: 10px;
  overflow: auto;
  .content-header {
    margin-bottom: 20px;
    color: #696969;
    .close {
      color: #1e90ff;
    }
  }
  .page-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .add-title {
      color: #fff;
      background: #ffc125;
      font-size: 14px;
      padding: 5px 10px;
      border-radius: 5px;
      font-weight: 400;
    }
  }
  .page-table {
    .icon-list {
      display: flex;
      align-items: center;
    }
    .look-detail {
      color: #1e90ff;
      padding: 0 10px;
      cursor: pointer;
    }
  }
}
</style>
